<template>
  <footer class="footer_guide">
    <!--Component Footer-->
    <div class="item_wrap">
      <router-link to="/home">
        <div :class="/home/.test($route.path)?'on':'off'" class="icon home"></div>
        <span :class="/home/.test($route.path)?'on':'off'">主页</span>
      </router-link>
    </div>
    <div class="item_wrap">
      <router-link to="/category">
        <div :class="/category/.test($route.path)?'on':'off'" class="icon category"></div>
        <span :class="/category/.test($route.path)?'on':'off'">分类</span>
      </router-link>
    </div>
    <div class="item_wrap">
      <router-link to="/topic">
        <div :class="/topic/.test($route.path)?'on':'off'" class="icon know"></div>
        <span :class="/topic/.test($route.path)?'on':'off'">识物</span>
      </router-link>
    </div>
    <div class="item_wrap">
      <router-link to="/shopcart">
        <div :class="/shopcart/.test($route.path)?'on':'off'" class="icon cart"></div>
        <span :class="/shopcart/.test($route.path)?'on':'off'">购物车</span>
      </router-link>
    </div>
    <div class="item_wrap">
      <router-link to="/profile">
        <div :class="/profile/.test($route.path)?'on':'off'" class="icon profile"></div>
        <span :class="/profile/.test($route.path)?'on':'off'">个人</span>
      </router-link>
    </div>
  </footer>
</template>

<script>
  export default {
    name: 'index',
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .footer_guide
    position fixed
    bottom 0
    z-index 30
    width 100%
    height 98px
    display flex
    justify-content space-between
    background: #fff
    .item_wrap
      flex 1
      text-align center
      display flex
      flex-direction column
      justify-content center
      span
        &.on
          color #B4282D
          
        &.off
          color black
        
      .icon
        width 40px
        height 40px
        margin 0 auto
        margin-bottom 7px
        background-size 100%
        background-image url("./FooterIcon.png")
        
        &.home
          &.on
            background-position 0 44%
            color red
          &.off
            background-position 0 55%
        
        &.category
          &.on
            background-position: 0 21%
          
          &.off
            background-position: 0 32%
        
        &.know
          &.on
            background-position: 0 66%
          
          &.off
            background-position: 0 77%
        
        &.cart
          &.on
            background-position: 0 0
          
          &.off
            background-position: 0 10%
        
        &.profile
          &.on
            background-position: 0 89%
          
          &.off
            background-position: 0 100%
</style>
